<script lang="ts" setup>
import { reactive, ref } from 'vue'
import va from '@/rules/index'
import type { FormInstance, FormRules } from 'element-plus/es/components/form'
import type { IUnknownObjProps } from '@/interface/base.interface'
import type {
  IFormDialogProps,
  IFormDialogTypeProps,
} from '@/components/sofastui/AdvancedForm/interface'
import { formDialogTitles } from '@/components/sofastui/AdvancedForm/constant'

const emits = defineEmits(['success'])

const formRef = ref<FormInstance>()

//引入自定义验证规则
const formRules = reactive<FormRules>({
  name: [va.required()],
  nickname: [va.required()],
  idcard: [va.required()],
  phone: [va.required()],
})

// reactive 数据双向绑定
const saveLoading = ref(false)
const formDialog: IFormDialogProps = reactive({
  top: '15vh',
  width: '860px',
  type: 'add',
  title: '新增',
  span: 12,
  visible: false,
})
const formData = ref<{
  [key: string]: unknown
}>({})

const show = (type: IFormDialogTypeProps, data: { [key: string]: IUnknownObjProps } = {}) => {
  formDialog.type = type
  formData.value = data
  formDialog.title = formDialogTitles[type]

  formDialog.visible = true
}
const saveForm = async (formRef: FormInstance | undefined) => {
  saveLoading.value = true
  if (!formRef) return
  try {
    await formRef.validate()
    emits('success')
  } catch (error) {
    console.log('error submit!!')
    console.log(error)
    saveLoading.value = false
  }
}
// const saveSuccess = (message: string) => {
//   ElMessage({
//     type: 'success',
//     message,
//   })
//   saveLoading.value = false
//   formDialog.visible = false
//   emits('success')
// }

defineExpose({ show })
</script>

<template>
  <el-dialog
    :title="formDialog.title"
    v-model="formDialog.visible"
    :top="formDialog.top"
    :width="formDialog.width"
    :close-on-click-modal="false"
    :append-to-body="true"
    destroy-on-close
  >
    <el-form
      :model="formData"
      :rules="formRules"
      ref="formRef"
      label-width="90px"
      label-suffix=":"
      label-position="top"
    >
      <el-row :gutter="20">
        <el-col :span="formDialog.span">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="formData.name" maxlength="50" placeholder="请输入用户名" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="密码" prop="pswd">
            <el-input v-model="formData.pswd" maxlength="50" placeholder="请输入密码" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="姓名" prop="nickname">
            <el-input v-model="formData.nickname" maxlength="50" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="身份证号码" prop="idcard">
            <el-input v-model="formData.idcard" maxlength="18" placeholder="请输入身份证号码" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" maxlength="50" placeholder="请输入手机号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="saveForm(formRef)"
          icon="CircleCheck"
          :loading="saveLoading"
          >保 存</el-button
        >
        <el-button @click="formDialog.visible = false" icon="CircleClose">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
@/interface/base.interface@/components/sofastui/AdvancedForm/interface
